<template>
  <div class="category">
    <navbar class="category-nav-bar">
      <div slot="center">商品分类</div>
    </navbar>
    <slide-bar :categorylist="categorylist" @slideBarItemClick="slideBarItemClick"></slide-bar>
    <scroll class="scroll-height" ref="scroll">
      <sub-category :subcategorylist="subcategorylist" @imageLoad = "imageLoad"></sub-category>
      <tabcontrol :title="titlelist" @itemclick="itemClick" ref="tabcontrol"></tabcontrol>
      <goods-list :goods="categorydetaillist" ></goods-list>
    </scroll>

  </div>
</template>

<script>
  import GoodsList from '../../components/content/goods/GoodsList/GoodsList.vue'
  import Tabcontrol from '../../components/content/TabControl/TabControl.vue'
  import SlideBar from './childComps/SlideBar.vue'
  import SubCategory from './childComps/SubCategory.vue'
  import {getCategory,getCategoryDetail,getSubCategory} from '../../network/category.js'
  import Navbar from '../../components/common/navbar/Navbar.vue'
  import scroll from '../../components/common/scroll/scroll.vue'
  export default{
    data:function(){
      return{
        titlelist:['流行','新款','精选'],
        // 分类详情数据
        subcategorylist:[],
        categorydetaillist:[],
        // 分类侧边栏数据
        categorylist:[],
        currentIndex:0
      }
    },
    components:{Navbar,SubCategory,SlideBar,scroll,Tabcontrol,GoodsList},
    mounted() {

    },
    methods:{
      slideBarItemClick({maitKey,index}){
        if(this.currentIndex == index) return;
        this.currentIndex = index
        // 每次切换侧边栏的类型时初始换tabcontrol的下标
        this.$refs.tabcontrol.currentindex = 0
        this.getCategoryDetail(this.categorylist[this.currentIndex].miniWallkey,'pop')
        this.getSubCategory(maitKey)
      },
      getCategory(){
        getCategory().then(res=>{
          // console.log(res)
          this.categorylist = res.data.category.list
          console.log(this.categorylist)
        })
      },
      getSubCategory(key){
         getSubCategory(key).then(res=>{
           // console.log(res)
           // 两种写法都可以
           // this.subcategorylist = res.data.list
           this.subcategorylist = [...res.data.list]
           // console.log(this.subcategorylist)
         })
      },
      getCategoryDetail(key,type){
        getCategoryDetail(key,type).then(res=>{
          // console.log(res)
          this.categorydetaillist = [...res]
          console.log(this.categorydetaillist)
        })
      },
      itemClick(index){
        const typeList=['pop','new','sell']
        this.getCategoryDetail(this.categorylist[this.currentIndex].miniWallkey,typeList[index])
      },
      imageLoad(){
        this.$refs.scroll.refresh()
      }
    },
    created() {
      this.getCategory()
      this.getCategoryDetail('10062603','pop')
      this.getSubCategory('3627')
    },
    activated(){
      this.$store.commit('setLoading',true)
      }
  }
</script>

<style scoped="scoped">
  .category-nav-bar{
    font-weight: 600;
    background-color: pink;
  }
  .scroll-height{
    position: fixed;
    left: 100px;
    top: 44px;
    right: 0;
    bottom: 49px;
    overflow: hidden;
  }
</style>
